<template>
<div class="transport-content-box highway-content">
     	<!-- banner图 -->
     	<div class="h-banner">
     	</div>
    	<!-- 热门路线 -->
      <div class="h-hot-way container-1200">
       		<div class="h-hot-title">
           			<span></span>
           			<span>热门公路运输线路</span>
           			<img src="@/static/img/index/hot.png">
       		</div>
       		<div class="h-hot-city">
              <ul>
                <li v-for="(item,index) in hotLineList" :key="index" @click="addChange(item)">
                    <!-- <nuxt-link :to="'/transport/list?fromCity='+item.fromCity+'&toCity='+item.toCity"> -->
                      <span>{{item.fromCity}}</span>
                      <span></span>
                      <span>{{item.toCity}}</span>
                    <!-- </nuxt-link> -->
                </li>
              </ul>
       		</div>
      </div>
    	<!-- 出发城市搜索 -->
      <div class="h-city-search">
       		<div class="container-1200">
       		       	<a-form>
                  		<a-row :gutter='24' class='city-form'>
                            <a-col :span='8'>
                                  <a-form-item label="出发地:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                                        <a-input  placeholder="请选择出发地"  v-model="fromCity" readOnly @click="magSvgShowMap('departureCar')"/>
                                  </a-form-item>
                            </a-col>
                            <a-col :span='8'>
                                  <a-form-item label="到达地:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                                        <a-input  placeholder="请选择车辆到达地" v-model="toCity" readOnly @click="magSvgShowMap('destinationCar')"/>
                                  </a-form-item>
                            </a-col>
                            <a-col :span='8'>
                                  <a-button type="primary" :span='2' style='margin:0 20px 0 70px;'  @click="lineGetSelectLines">搜索</a-button>
                                  <a-button :span='2' @click="reset">重置</a-button>
                            </a-col>
                      </a-row>
                 		 	<a-row :gutter='24' class='types-chose'>
                          <a-col :span='8'>
                              <a-form-item label="运输类型:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                                <a-select placeholder="全部" :defaultValue="transType" v-model="transType"  @change="transTypeChange">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option v-for="(item,index) in highwayList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
                                </a-select>
                              </a-form-item>
                          </a-col>
                          <a-col :span='8'>
                              <a-form-item label="车辆类型:"   :label-col="{ span: 8}" :wrapper-col="{ span:16 }">
                                <a-select placeholder="全部" v-model="carType" @change="carTypeChange">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.dictKey" v-for="(item,index) in carTypeList" :key="index">{{item.dictValue}}</a-select-option>
                                </a-select>
                              </a-form-item>
                          </a-col>
                      </a-row>
       		 	     </a-form>
       		</div>
      </div>
     	<!-- 公路信息 -->
     	<div class="h-information road-detail-content container-1200">
     		<div class="h-info-title">
         			<span></span>
         			<span>公路信息</span>
     		</div>
        <div class="all-ways">
          <a-list itemLayout="vertical" size="large" :dataSource="listData" :pagination="pagination">
              <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                <div class="road-box-conent">
                      <div class="road-pic">
                          <img :src="item.companyPic">
                      </div>
                      <div class="road-name">
                          <span>出发地:<i class="road-city-name  wy-text-nowrap">{{item.beginPlace}}</i></span>
                          <span>到达地:<i  class="road-city-name  wy-text-nowrap">{{item.endPlace}}</i></span>
                          <span>线路介绍:<i class="road-black wy-text-nowrap">{{item.description||'暂无'}}</i></span>
                      </div>
                </div>
                <div v-if="item.lineType==1" class="road-box-conent public-road">
                        <p><i class="road-city-name">公路运输</i></p>
                        <span  class="active-data" v-if="item.transTypeName == '零担'">重货价:<i class="road-orange">{{item.weightPriceDisplay}}</i>
                          <!-- <i v-if="item.weightPriceUnit == null">元/公斤</i> -->
                          <i>{{item.weightPriceUnitValue}}</i>
                        </span>
                        <span  class="active-data" v-if="item.transTypeName == '零担'">轻货价:<i class="road-orange">{{item.volumePriceDisplay}}</i>元/立方米</span>
                        <span class="active-data">有效期:<i class="road-black road-orange" v-if="item.longValid == 0">{{item.validDay || '暂未输入'}}</i><i v-if="item.longValid == 0" style="padding-left:0">天</i><i class="road-black" v-if="item.longValid == 1" style="padding-left: 6px;">长期有效</i>
                        </span>
                        <span class="low-price">最低一票价:<i class="road-orange">{{item.transPriceDisplay}}</i><i class="road-orange" v-if="item.transPriceDisplay == null">-</i>元</span>
                </div>
                <div class="road-box-conent">
                        <p><i class="road-city-name">{{item.companyName}}</i><b v-if="item.status == 1">推荐</b></p>
                        <div class="useStar">
                            <span>用户星级</span> 
                            <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                            <div class="attestaion">{{item.attestationStatusValue}}</div>
                        </div>
                </div>
                <div class="road-box-conent">
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='ant-btn-primary road-sell' type="primary" @click="TipsShowModal(item.userId)">立即沟通</a-button>
                    <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">立即沟通</a-button></router-link>
                    <nuxt-link :to="'/transport/'+item.lineId">
                        <a-button class='road-detail'>查看详情</a-button>
                    </nuxt-link>
                </div>
              </a-list-item>
          </a-list>
        </div> 
     	</div>
      <Elastic :userId="userId" ref='elastic'></Elastic>
         <!-- 提示认证弹框 -->
    <Elastics  ref='elastics'></Elastics>
     <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
</div>
</template>
<script>
import Elastic from '@/components/dialog/Elastic'
import Elastics from '@/components/dialog/Elastics'
import AuthMixin from '~/mixins/auth'
export default {
  mixins: [ AuthMixin ],
  components: {
    Elastic,
    Elastics,

  },
  data() {
    return {
       userId: '',
      // 热门
      hotLineList: [], 
       // 起运地地址
      departureCar: '',
      destinationCar: '',
      // 数据列表
      listData: [],
      fromCity: '',
      toCity: '',
      // 运输类型
      transType: '',
      // 车辆类型
      carType: '',
      // 车辆类型列表
      carTypeList: [],
      // 公路运输类型
      highwayList: [],
      // 表格分页
      pagination: {
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        current: 1,
        pageSize: 7,
        total: 0,
        showTotal: (total, range) => `共 ${total} 条记录`,
        onChange: (page) => {
          this.pagination.current = page
          this.lineGetSelectLines()
        }
      },
    }
  },
  beforeCreate() {
    // this.form = this.$form.createForm(this);
  },
  created: function() {
    const _transType = this.$route.query.transType;
    if ( _transType ) this.transType = parseInt(_transType);
    this.infoCommonDict(5);
    this.infoCommonDict(11);
    this.lineGetLinesHot();
    this.lineGetSelectLines();
  },
  methods: {
      // 弹框
      elasticShowModal(id){
        this.$refs.elastic.showModal(id);
      },
      TipsShowModal(id){
          this.$refs.elastics.warning(id);
      },
      // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 5: this.carTypeList = res.data.rows; break;
              case 11: this.highwayList = res.data.rows; break;
            }
          } 
      },
      // 重置
      reset (){
        this.transType = '';
        this.carType = '';
        this.departureCar = '';
        this.destinationCar = '';
        this.fromCity = '';
        this.toCity = '';
        this.pagination.current = 1;
        this.lineGetSelectLines();
      },
      // 获取热门线路
      async lineGetLinesHot () {
        const res = await this.$store.dispatch('info/lineGetLinesHot',{
          pageSize: 10,
          pageIndex: 1,
          hotLine: 1
        })
        if (res.status) {
          this.hotLineList = res.data || [];
          // console.log(this.hotLineList,133333333)
        } 
      },
      //热门线路
      // addChange(item){
      //   this.pagination.current = 1
      //   this.departureCar = item.fromCity
      //   this.destinationCar = item.toCity
      //   this.lineGetSelectLines()
      // },
      addChange(item){
        this.fromCity = item.beginPlace;
        this.toCity = item.endPlace
        // this.lineGetSelectLines()
      },
      // 表格数据分页调用
      tableChange (e) {
        // this.pagination.current = e.current;
        this.pagination = e
        this.lineGetSelectLines()
      },
      // 获取线路列表
      async lineGetSelectLines () {
          const res = await this.$store.dispatch('info/lineGetSelectLines',{
            lineType: 1,
            beginPlace: this.fromCity,
            endPlace: this.toCity,
            // fromCity: this.departureCar,
            companyName: this.companyName,
            // toCity: this.destinationCar,
            transType: this.transType,
            carType: this.carType,
            pageSize: this.pagination.pageSize,
            pageIndex: this.pagination.current
          })
          if (res.status && res.data) {
            this.listData = res.data.rows || [];
            this.pagination.total = res.data.total;
            console.log(this.listData,1123);
          } else{
            this.listData = [];
            this.pagination.total = 0;
          }
      },
      // 运输类型切换
      transTypeChange(key){
        this.transType = key;
      },
      // 车辆类型切换
      carTypeChange(key){
        this.carType = key;
      },
      // 省市地图回调
      mapSvgCall (d) {
        // console.log(d,111)
        // this[d.name] = d.city;
        this[d.name] = d.provCityArea;
        if(d.name=='departureCar'){
          this.fromCity = d.provCityArea;
        }
        if(d.name=='destinationCar'){
          this.toCity = d.provCityArea;
        }        
      },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      }
  }
}
</script>
<style lang="scss">
@import "@/assets/css/info/roadDetail.scss";
@import "@/assets/css/transport/road.scss";
.highway-content{
    //轮播
    .h-banner{
      background:url('~static/img/transport/transport1.jpg') center top / cover no-repeat;
    }
   .ant-table-column-sorter{
        right: 22px  !important;
        margin-top: -8px !important
    }
    th:nth-child(5){
       .anticon-caret-up{
            display:none !important;
        }
     }
   th:nth-child(6){
       .ant-table-column-sorter{
          margin-top:-4px !important;
       }
       .anticon-caret-down{
            display:none !important;
        }
     }
    th:nth-child(8){
       .anticon-caret-up{
            display:none !important;
        }
     }
    .road-name{
        margin-top: 20px;
    }
  //出发城市搜索 
   .h-city-search{
     width:100%;
     clear:both;
     height:140px;
     background:#F9F9F9;
     margin-top:30px;
      .ant-form-item-label label{
        font-size:16px;
        color:#333333;
        font-weight:400;
       }
      .ant-form-item-control{
        input{
          font-size:14px;
          height:40px;
        }
       }
     .city-form{
        padding-top:20px;
       .ant-form-item-control{
           width:330px;
           height:40px;
          input{
            width:330px;
          }
        }
     }
     .types-chose{
      .ant-form-item-control{
        width:190px;
        height:40px;
        input{
          width:190px;
        }
        .ant-select-selection{
          width:160px;
            height:40px;
            .ant-select-selection__rendered{
              line-height:40px;
            }
        }
      }
     }
   }
   tr,td,th{
      padding:8px !important;
   }

    //公共样式
  .all-ways {
      .low-price{
          text-indent: 0em !important;
          margin-left: 0px;
      }
      .active-data{
          margin-left: 28px;
          text-indent: 0em !important;
      }
     .road-box-conent:nth-child(2){
          margin-top:4px;
          text-align:center;
         .road-orange{
               color:#FFA200;
         }
         p{
          line-height:16px;
          margin-bottom:12px;
         }
         span{
           margin-bottom:12px;
           text-indent:3em;
         }
        span:nth-child(5){
          text-indent: 0em;
        }
        .seaTime{
            margin-top:16px;
        }
      }
    .road-box-conent:nth-child(3){
          margin-left: 45px;
         .road-city-name{
          vertical-align:middle;
        }
    }
  }
  //公路,铁路
  .public-road{
      width: 170px !important;
      text-align:center;
      margin-left:30px;
      span{
         text-align: left;
      }
  }
}
</style>